<template>
  <div class="p-2">
    <el-dialog v-model="dialogVisible" width="80%" :before-close="handleClose" title="OCR文件处理" destroy-on-close>
      <template #header>
        <div class="dialog_title_box">
          <p>OCR文件处理</p>
          <div class="dialog_title_box">
            <el-button @click="handleDownload" :icon="Download">下载</el-button>
            <a-select :style="{ width: '230px', marginRight: '20px',marginLeft:'20px' }" placeholder="请选择" v-model="saveOption">
              <a-option value="part" label="保存并同步至AI"></a-option>
              <a-option value="all" label="保存转换前后文件并同步至AI"></a-option>
            </a-select>
            <el-button @click="onImpoon" :icon="DocumentAdd">导入到知识库</el-button>
          </div>
        </div>
      </template>
      <div class="blank_space">
        <uploadOrc @uploadSuccess="uploadSuccess" />
        <Preview ref="previewRefs" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button> -->
        </div>
      </template>
    </el-dialog>
    <el-dialog custom-class="name_box_dialog" title="导入" v-model="dialog.visibleDialog" width="550px" :before-close="getClose" class="visible-dialog">
			<el-form  label-width="auto" style="max-width: 600px">
				<el-form-item label="文件名称" required>
					<el-input v-model="dialog.realName" placeholder="请输入文件名称"></el-input></el-form-item>
			</el-form>
        <template #footer >
          <el-button @click="getClose">
            {{  $t('teamDist.close') }}
          </el-button>
          <el-button type="success" @click="getReset" > {{ $t('teamDist.reset') }} </el-button>
          <el-button @click="debounce_getComfirm" :loading="importLoading"> {{ $t('commen.confirm') }} </el-button>
        </template>
		</el-dialog>
  </div>
</template>
     
<script setup lang='ts'>
import { Download, DocumentAdd } from '@element-plus/icons-vue'
import { Message } from "@arco-design/web-vue"
// 组建
import uploadOrc from '@/views/home/components/uploadOrc.vue';
import Preview from '@/views/home/components/editor/Preview.vue';
// api
import {
  apiTreeFileSelectTree,
  ApiPerSelectPersonalTree
} from '@/api/personDoc/personDocApi';
import { apiOcrToLibrany } from '@/api/ocrApi';
const emit = defineEmits(['refreshDatas'])
const dialogVisible = ref<boolean>(false);
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  ocrData.value = ''
};
// 打开弹窗
const open = (id:any) => {
  zxcId.value = id;
  dialogVisible.value = true;
};
const previewRefs = ref<any>();
const ocrData = ref<any>();
const storageId = ref<any>();
// 更新ocr数据
const uploadSuccess = (data: any, fileId: any) => {
  storageId.value = fileId;
  ocrData.value = data;
  previewRefs.value.upDataOcr(data);
};
const saveOption = ref('part')
////////////////////////////////////////////////// 导入知识库相关操作
const dialog = reactive({
  title: '',
  visibleDialog: false,
  personList: [],
  isHaveBack: false,
  page: 1,
  size: 10,
  total: 0,
  item: { id: '' },
  // 树结构
  defaultProps: {
    children: 'children',
    label: 'realName',
    isLeaf: 'leaf'
  },
  treeLoading: false,
  expandedKeys: [0],
  treeRestoreList: [],
  treeRestorePathObj: { path: '', id: '' },
  realName: '',
});
// 导入知识库按钮
const onImpoon = () =>{
	if (!ocrData.value) {
		Message.error('请先识别文档内容');
		return;
 	}
	getReset();
	dialog.visibleDialog = true;
}
// 关闭弹窗
const getClose = () =>{
	dialog.visibleDialog = false;
}
// 接收时重置
const getReset = () => {
  dialog.treeLoading = true;
  dialog.realName = '';
  let oParam = {
    sortDesc: 'type,create_time'
  };
  ApiPerSelectPersonalTree(oParam)
    .then((res) => {
      // console.log('🚀 ~ getReset ~ res:', res);

      dialog.treeRestorePathObj = res.data;
      dialog.treeRestoreList = res.data.children.filter((item) => item.type == 'folder');
      dialog.treeLoading = false;
    })
    .catch((err) => {
      dialog.treeLoading = false;
    });
};
const zxcId = ref<any>('')
const importLoading = ref<boolean>(false)
// 确定导入
const debounce_getComfirm = async () =>{
	if(!dialog.realName){
		Message.error('请输入文件名称');
		return;
	}
	if(!dialog.treeRestorePathObj.id){
		Message.error('请选择要导入的文件夹');
		return;
	}
  importLoading.value = true;
	let params:any = {
		type: zxcId.value ? 'enterprise' : 'personal',
		content: ocrData.value,
		treeNodeId: zxcId.value ? zxcId.value : dialog.treeRestorePathObj.id,
		realName: dialog.realName,
		storageId: storageId.value
	}
	if(zxcId.value){
		params.info = {type: saveOption.value }
	}
	let res:any = await apiOcrToLibrany(params);
	if(res.code == 200){
    importLoading.value = false;
		Message.success('导入成功');
		dialog.visibleDialog = false;
		dialog.realName = '';
    emit('refreshDatas')
	}
}
// 下载
const handleDownload = () =>{
  previewRefs.value.downloadFile()
}
defineExpose({
  open
});
</script>
<style scoped lang='scss'>
:deep(.el-dialog__body) {
  // height: 81vh !important;
}
:deep(.name_box_dialog){
  background-color: red;
  // height: auto !important;
}
.dialog_title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 10px;
}
.blank_space {
  overflow: hidden;
  display: flex;
  height: 70vh !important;
  .arco_row_arco {
    width: 50%;
  }
}
:deep(._editWrap_35djg_1.colorBgContainer_pubCol){
	height: 100%;
}
</style>
<style>
.arco-trigger-popup{
  z-index: 3000 !important;
}
</style>